<template>
    <view class="main">
        <tn-popup v-model="props.showPopup" open-direction="bottom" @close="emit('closePop', false)">
            <view class="pop-main">
                <view class="title dispaly-align-center">分享到</view>
                <view class="item-box dispaly-just-between">
                    <view class="item dispaly-col-center wx">
                        <button open-type="share" class="icon">
                            <image src="/static/icon/wx.png" />
                        </button>
                        <view class="name">微信</view>
                    </view>
                    <view @click="share(item)" class="item dispaly-col-center" v-for="item in shareData"
                        :key="item.type">
                        <view class="icon">
                            <image :src="item.icon" />
                        </view>
                        <view class="name">{{ item.name }}</view>
                    </view>
                </view>
                <view class="cancel dispaly-align-center" @click="emit('closePop', false)">取消</view>
            </view>
        </tn-popup>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TnPopup from "@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue";


interface ShareDataType {
    icon: string;
    type: string;
    name: string;
}

const shareData = ref<Array<ShareDataType>>([
    { icon: "/static/icon/qq.png", type: "qq", name: "QQ" },
    { icon: "/static/icon/link.png", type: "link", name: "复制链接" },
]);

interface Props {
    showPopup: boolean
}

const props = withDefaults(defineProps<Props>(), {
    showPopup: false,
})

const emit = defineEmits(['closePop'])

const share = (item: ShareDataType) => {
    const { type } = item;
    if (type == "link") {
        uni.setClipboardData({
            data: `/subPackage/index/jobDetail?id=${1}`, //要被复制的内容
            success: () => {
                uni.showToast({
                    title: "复制成功",
                    icon: "none",
                });
            },
        });
    } else {
        uni.showToast({
            title: "暂未开放",
            icon: "none",
        });
    }
    // uni.shareWithSystem
};
</script>
<style lang="scss" scoped>
.pop-main {
    .cancel {
        border-top: 1rpx solid #eee;
        padding: 45rpx 0 45rpx 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #7e7e7e;
    }

    .title {
        margin: 38rpx 0 43rpx 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        padding-right: 20rpx;
    }

    .item-box {
        padding: 0 101rpx;
        margin-bottom: 79rpx;

        .wx {
            .icon {
                width: 92rpx;
                height: 100rpx;
            }
        }

        .item {
            .icon {
                image {
                    width: 92rpx;
                    height: 92rpx;
                }
            }

            .name {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #7e7e7e;
            }
        }
    }
}
</style>